<style lang='less' >
	@import '~style/table.less';

</style>

<template>
    <div>
        <div class="dataBox">
            <el-table
                :data="data"
                height="450"
                style="width: 100%"
                :default-sort = "{prop: 'id', order: 'ascending'}">

                <el-table-column
                    prop="productCode"
                    label="产品编码"
                    width='200'>
                </el-table-column>

                <el-table-column
                    prop="productName"
                    label="产品名称"
                    width='200'>
                </el-table-column>

                <el-table-column
                    prop="proStatus"
                    label="上下架状态"
                    :formatter='getPublishStatus'
                    width='100'>
                </el-table-column>

                <el-table-column
                    prop="startSaleTime"
                    label="上架时间"
                    sortable
                    :formatter='cutStartDate'
                    width='180'>
                </el-table-column>

                <el-table-column
                    prop="endSaleTime"
                    label="下架时间"
                    sortable
                    :formatter='cutEndDate'
                    width='180'>
                </el-table-column>

                <el-table-column
                    prop="issuerId"
                    label="发行方"
                    :formatter='getIssuerName'
                    width='100'>
                </el-table-column>

                <el-table-column
                    prop="full"
                    label="是否满标"
                    :formatter='getFullStatus'
                    width='100'>
                </el-table-column>

                <el-table-column
                    prop="financingAccount"
                    label="募集额度"
                    width='150'>
                </el-table-column>

                <el-table-column
                    prop="yraiseAccount"
                    label="已募集金额"
                    width='150'>
                </el-table-column>

                <el-table-column
                    prop="participateNumber"
                    label="募集人数"
                    width='100'>
                </el-table-column>

                <el-table-column
                    label="操作"
                    min-width='200' >
                    <template scope="scope">
                        <btns-box
                            :scope ='scope'
                            :btnControl='getButtonConfig'
                            v-on:reloadTable='setTableParams'
                        ></btns-box>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="paginationBox">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total='totalSize'>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import btnsBox from './_button.vue'
    import{publishStatusObj} from '../config.js'
    export default {
      props:['data','issuerList','getButtonConfig','totalSize'],
        components:{
            btnsBox,
        },
        data(){
            return{
                publishStatusObj:publishStatusObj,
                currentPage:1,//当前页
                pageSize:10,//每页显示的条数
            }
        },
        computed:{
        },
        methods:{
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.currentPage = 1;
                this.setTableParams()
            
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.setTableParams()
            },
            setTableParams(){
                let obj = {
                    curPage:this.currentPage,
                    pageSize:this.pageSize,
                }
                console.log('setTableParams', obj)
                this.$emit('setTableParams', obj)
            },
            cutStartDate(row,column){
                return row.startSaleTime.slice(0,19)
            },
            cutEndDate(row,column){
                return row.endSaleTime.slice(0,19)
            },
            getPublishStatus(row, column){
                let statusArr =['未上架','已上架','','','已下架']
                return statusArr[row.proStatus]
            },
            getFullStatus(row, column){
                return row.full ? '已满标' :'未满标';
            },
            getIssuerName(row, column){
                for(let i = 0; i < this.issuerList.length; i++){
                    if(this.issuerList[i].id === row.issuerId){
                        return this.issuerList[i].name
                    }
                }
            }
        },
        created(){
            this.setTableParams()
        }
  }
</script>